<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="22"
    height="22"
    viewBox="0 0 22 22"
    fill="none"
  >
    <g clip-path="url(#clip-path-0)">
      <path
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M6.76001 9.35001L6.76001 15.64"
      ></path>
      <path
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M11.03 6.34L11.03 15.64"
      ></path>
      <path
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M15.24 12.67L15.24 15.64"
      ></path>
      <path
        d="M1.83002 7.42L1.83002 16.24C1.83002 19.52 3.87002 21.83 7.14002 21.83L16.52 21.83C19.79 21.83 21.83 19.52 21.83 16.24L21.83 7.42C21.83 4.14 19.79 1.83 16.52 1.83L7.14002 1.83C3.88002 1.83 1.83002 4.14 1.83002 7.42Z"
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
      ></path>
    </g>
    <defs>
      <clipPath id="clip-path-0">
        <path d="M0 22L22 22L22 0L0 0L0 22Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
